<template>
    <div class="pagem flex-col">
        <div class="sectiond_1" v-loading.fullscreen.lock="isLoading" element-loading-text="加载中">
            <div class="groupm_1 flex-rowc">
                <div class="banner">
                    <el-header></el-header>
                </div>
            </div>
            <div class="boxm_2 flex-col">
                <div class="boxm_3 flex-col">
                    <span class="textn_2">账号信息</span>
                    <img class="image_2m" />

                    <el-form label-width="100px" class="demo-ruleForma" :model="ruleForm" :rules="rules" ref="ruleForm">
                        <el-form-item label="招聘头像" prop="avatar" class="el-form-itema">
                            <div style="margin-top: -29px; background-color: unset">
                                <el-upload :action="this.upImgUrl" name="img" :on-preview="handlePictureCardPreview"
                                    :on-success="fileSuccess" :before-upload="beforeAvatarUpload" :src="ruleForm.avatar">
                                    <div class="block">
                                        <el-avatar shape="square" :size="100" :src="ruleForm.avatar"></el-avatar>
                                    </div>
                                </el-upload>
                                <!--放大图片的弹窗-->
                                <el-dialog :visible.sync="dialogVisible" append-to-body>
                                    <img width="100%" :src="dialogImageUrl" alt="" />
                                </el-dialog>
                            </div>
                        </el-form-item>
                        <el-form-item label="招聘昵称" prop="username" class="el-form-itema">
                            <el-input v-model="ruleForm.username" placeholder="请填写招聘昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="职务" prop="job" class="el-form-itema">
                            <el-input v-model="ruleForm.job" placeholder="请填写招聘职务"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone" class="el-form-itema">
                            <el-input v-model="ruleForm.phone" placeholder="请填写用于招聘的手机号" maxlength="11"
                                minlength="11"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email" class="el-form-itema">
                            <el-input v-model="ruleForm.email" placeholder="请填写用于招聘的邮箱"></el-input>
                        </el-form-item>
                        <el-form-item label="微信" prop="wechat" class="el-form-itema">
                            <el-input v-model="ruleForm.wechat" placeholder="请填写用于招聘的微信号"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="bannerbtn">
                <button @click="editcompInfo()">保 存</button>
                <button @click="cancel()">退出编辑</button>
            </div>
        </div>
    </div>
</template>
<script>
import elHeader from "../../common/elHeader.vue";
import { upImgUrl } from '../../utils/baseUrl.js'
export default {

    data() {
        // 手机号校验
        var validatePhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入手机号"));
            } else if (!/^\d{11}$/.test(value)) {
                callback(new Error("请输入有效的手机号"));
            } else {
                callback();
            }
        };
        // 邮箱校验
        var validateEmail = (rule, value, callback) => {
            const emailRegex =
                /^([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})$/;
            if (value === "") {
                callback(new Error("请输入邮箱地址"));
            } else if (!emailRegex.test(value)) {
                callback(new Error("请输入正确的邮箱地址"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                username: "",
                avatar: "",
                email: "",
                job: "",
                wechat: "",
                phone: "",
            },
            isLoading: false,
            rules: {
                username: [
                    { required: true, message: "请输入招聘昵称", trigger: "blur" },
                ],
                job: [{ required: true, message: "请输入职务", trigger: "blur" }],
                phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
                email: [{ required: true, validator: validateEmail, trigger: "blur" }],
            },
            dialogImageUrl: "", //这个是放大展示弹框里的图片
            dialogVisible: false, //头像放大弹窗
            upImgUrl: ''

        };
    },
    created() {
        this.upImgUrl = upImgUrl
    },
    components: {
        elHeader,
    },
    mounted() {
        this.getcompInfo();
    },
    methods: {
        //查看大图
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 获取个人中心信息
        async getcompInfo() {
            this.isLoading = true
            const res = await this.$service.get({
                url: "/api/zp/v1/zpapp_comp_userinfo",
            });
            console.log("zpapp_comp_userinfo",res);
            if (res.code == 1) {
                this.ruleForm = res.info;
                this.isLoading = false
                localStorage.setItem("avatar user_logo", res.info.avatar)
            }
        },
        // 修改用户信息
        async editcompInfo() {
            // 表单验证
            await this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    const res = await this.$service.post({
                        url: "/api/zp/v1/zpapp_edit_comp_userinfo",
                        data: {
                            ...this.ruleForm,
                        },
                    });
                    if (res.code == 1) {
                        this.getcompInfo()
                        this.$message.success(res.msg);
                        setTimeout(() => {
                            this.$router.push("/enterpriseIndex");
                        }, 1000);
                        this.ruleForm = res.info;
                    }
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });

        },
        // 图片上传成功
        fileSuccess(file) {
            this.ruleForm.avatar = file.info.img_url;
            console.log("avataravataravataravatar", this.ruleForm.avatar);
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 5MB!");
            }
            return isLt2M;
        },
        // 退出编辑
        cancel() {
            this.$router.push("/enterpriseIndex");
        },
    },
};
</script>

<style scoped>
::v-deep .el-form-item__error {
    top: 87%;
}

::v-deep .el-upload-list {
    position: absolute;
    top: 0;
    left: 120px;
}

::v-deep .el-upload-list__item-name,
::v-deep .el-upload-list__item .el-icon-upload-success {
    display: none;
}

::v-deep .el-upload-list__item .el-progress__text {
    width: 120px;
    display: flex;
    position: absolute;
    left: 0px;
}

::v-deep .el-input__inner {
    width: 500px;
}

.bannerbtn {
    width: 1000px;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

button {
    width: 170px;
    height: 40px;
    background: rgb(221, 0, 0) !important;
    border: 1px solid rgb(221, 0, 0);
    color: #fff;
    font-size: 16px;
}

button:nth-child(2) {
    background-color: #fff !important;
    color: #606266;
    border: 1px solid #dcdfe6;
    margin-left: 30px;
}

::v-deep .el-avatar>img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 100% !important;
}

.pagem {
    background-color: rgba(242, 242, 242, 1);
    position: relative;
    /* width: 1512px; */
    /* height: 998px; */
    overflow: hidden;
    margin: 0 auto;
}

.groupm_1 {
    background-color: rgb(255, 254, 254);
    /* width: 1920px; */
    height: 117px;
    /* margin-left: 114px; */
}

.banner {
    width: 1200px;
    margin: 0 auto;
}

.groupm_1 .banner {
    width: 1200px;
    display: flex;
    background-color: #fff;
    position: relative;
    justify-content: end;
    height: 103px;
}

.imagem_1 {
    width: 221px;
    height: 51px;
    margin: 31px 0 0 148px;
    background-color: #fff;
}

.textmm_1 {
    width: 32px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 152px;
    background-color: #fff;
}

.textm_2 {
    width: 64px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 52px;
    background-color: #fff;
}

.textm_3 {
    width: 64px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 74px;
    background-color: #fff;
}

.textm_4 {
    width: 64px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 80px;
    background-color: #fff;
}

.textm_5 {
    width: 153px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(217, 4, 3, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 83px;
    background-color: #fff;
}

.imagem_2 {
    width: 54px;
    height: 54px;
    margin: 36px 0 0 40px;
    background-color: #fff;
}

.textm_6 {
    width: 32px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 51px 360px 0 39px;
    background-color: #fff;
}

.boxm_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 1920px;
    height: 110px;
}

.image_1 {
    width: 221px;
    height: 51px;
    margin: 33px 0 0 41px;
}

.label_1 {
    width: 29px;
    height: 29px;
    margin: 46px 0 0 1387px;
}

.textn_1 {
    width: 148px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 48px 80px 0 14px;
}

.boxm_2 {
    margin-bottom: 1px;
    margin-top: 73px;
}

.boxm_3 {
    background-color: rgba(255, 255, 255, 1);
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 30px;
    box-sizing: border-box;
}

.textn_2 {
    width: 72px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin: 41px 0 0 30px;
    background-color: #fff;
}

.image_2m {
    width: 940px;
    height: 1px;
    margin: 17px 0 0 30px;
    background-color: #a9b1bcb1;
}

.section_1 {
    width: 443px;
    height: 45px;
    margin: 60px 0 0 367px;
    background-color: #fff;
}

.textn_3t {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
}

.textn_4 {
    width: 54px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 10px;
    background-color: #fff;
}

.text-wrapper_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
    width: 342px;
}

.textn_5 {
    width: 96px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_2 {
    width: 423px;
    height: 45px;
    margin: 27px 0 0 387px;
    background-color: #fff;
}

.textn_6t {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
}

.textn_7 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 8px;
    background-color: #fff;
}

.text-wrapper_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
    width: 342px;
    background-color: #fff;
}

.textn_8 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_3 {
    width: 423px;
    height: 45px;
    margin: 27px 0 0 387px;
    background-color: #fff;
}

.textn_9 {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
    margin-left: -35px;
}

.textn_10 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 8px;
    background-color: #fff;
}

.text-wrapper_3 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 63px;
    width: 342px;
}

.textn_11 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_4 {
    width: 423px;
    height: 45px;
    margin: 27px 0 0 387px;
    background-color: #fff;
}

.textn_12 {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
}

.textn_13 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 8px;
    background-color: #fff;
}

.text-wrapper_4 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
    width: 342px;
}

.textn_14 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_5 {
    width: 492px;
    height: 45px;
    margin: 27px 0 0 318px;
    background-color: #fff;
}

.textn_15 {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
}

.textn_16 {
    width: 108px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 5px;
    background-color: #fff;
}

.text-wrapper_5 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
    width: 342px;
}

.textn_17 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_6 {
    width: 438px;
    height: 45px;
    margin: 27px 0 0 372px;
}

.textn_18 {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 11px;
    background-color: #fff;
}

.textn_19 {
    width: 54px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 5px;
    background-color: #fff;
}

.boxm_4 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    width: 342px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
}

.textn_20 {
    width: 96px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.text-wrapper_6 {
    background-color: rgba(252, 233, 232, 1);
    height: 25px;
    width: 102px;
    margin: 10px 13px 0 115px;
}

.textn_21 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(255, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 4px 0 0 11px;
    background-color: #fff;
}

.text-wrapper_7 {
    background-color: rgba(217, 4, 3, 1);
    border-radius: 4px;
    height: 53px;
    width: 342px;
    margin: 33px 0 106px 468px;
}

.textn_22 {
    width: 72px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin: 14px 0 0 135px;
    background-color: rgba(217, 4, 3, 1);
}

body * {
    box-sizing: border-box;
    flex-shrink: 0;
}

body {
    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
        Arial, PingFang SC-Light, Microsoft YaHei;
}

input {
    background-color: transparent;
    border: 0;
}

button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background-color: transparent;
}

button:active {
    opacity: 0.6;
}

.van-nav-bar__left:active,
.van-nav-bar__right:active {
    opacity: 1;
}

[class*="van-"]::after {
    border-bottom: 0;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.justify-start {
    display: flex;
    justify-content: flex-start;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

.justify-evenly {
    display: flex;
    justify-content: space-evenly;
}

.justify-around {
    display: flex;
    justify-content: space-around;
}

.justify-between {
    display: flex;
    justify-content: space-between;
}

.align-start {
    display: flex;
    align-items: flex-start;
}

.align-center {
    display: flex;
    align-items: center;
}

.align-end {
    display: flex;
    align-items: flex-end;
}

.demo-ruleForma {
    background-color: #fff;
    margin: 0 auto;
    margin-top: 40px;
}

.el-form-item__label {
    background-color: #fff;
}

::v-deep .el-form-item__content {
    background-color: #fff;
    position: relative;
    font-size: 14px;
    margin-left: 20px !important;
}

.el-radio-group {
    background-color: #fff;
}

.el-form-itema {
    height: 61px;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
}

.el-radio__label {
    background-color: #fff;
}

.el-radio__input {
    background-color: #fff;
}

.el-form-item {
    /* margin-bottom: 22px; */
    background-color: #fff;
}

.el-select .el-input .el-select__caret {
    background-color: #fff;
}

.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin: 0 8px 8px 0;
    display: inline-block;
}

.el-upload-list--picture-card {
    background-color: #fff;
}

.el-icon-plus:before {
    content: "\e6d9";
    background-color: #fff;
}

.el-input__icon {
    margin-top: 1px;
    height: 64%;
    text-align: center;
    transition: all 0.3s;
    line-height: 17px;
    background-color: #fff;
}

.el-dialog__wrapper {
    background-color: rgb(129 125 125 / 47%);
}

.el-dialog {
    width: 26%;
}

el-radio {
    width: 30px;
    height: 20px;
}

.radio {
    height: 35px;
    width: 230px;
    margin-left: 71px;
    background-color: #fff;
}

.el-radio__label {
    font-size: 16px;
}

.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    cursor: pointer;
    line-height: 115px;
    vertical-align: top;
    margin: -2px 0px 0px 2px;
    /* background-color: unset; */
}

* {
    background-color: unset;
}

.el-upload el-upload--picture-card {
    margin: -1px;
}

.indexbannerbox[data-v-2f371814] {
    width: 900px;
    background: #fff;
    height: 117px;
    display: flex;
    justify-content: space-between;
    /* margin-left: 293px; */
    margin: 0 auto;
}

.headerBox {
    width: 1508px;
    background-color: #ab4a4a;
    margin-left: 121px;
}

.blockk_11[data-v-2f371814] {
    background-color: rgba(255, 255, 255, 1);
    height: 117px;
    margin-left: 139px;
}

.imagee_1[data-v-2f371814] {
    width: 220px;
    height: 62px;
    margin: 31px 0 0 0;
    background: #fff;
    position: absolute;
    left: 29px;
    top: 0;
}

.el-upload-list__item:first-child {
    margin-top: -583px;
}

.el-input__suffix {
    height: 72%;
    right: 5px;
    transition: all 0.3s;
    pointer-events: none;
}
</style>